<template>
  <view class="panel hot">
    <view class="item" v-for="item in list" :key="item.id">
      <view class="title">
        <text class="title-text">{{ item.title }}</text>
        <text class="title-desc">{{ item.alt }}</text>
      </view>
      <navigator
        :url="`/pages/hot/hot?type=${item.type}`"
        open-type="navigate"
        hover-class="none"
        class="cards"
      >
        <image
          v-for="(pic, index) in item.pictures"
          :key="index"
          class="image"
          mode="aspectFit"
          :src="pic"
        />
      </navigator>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { HotItem } from '@/types/home'
export interface Props {
  list: HotItem[]
}
withDefaults(defineProps<Props>(), {
  list: () => [],
})
</script>

<style lang="scss">
@import '../styles/hot.scss';
</style>
